<template>
  <div class="layout">
    <div class="weather-info">
      <div class="times">
        <div class="times_time">{{ time }}</div>
        <div class="years">{{ date }}</div>
      </div>

      <div class="weather" style="cursor: pointer;" v-if="WeatherData">
        <i
          :style="{ color: '#2360B0' }"
          :class="'qi-' + WeatherData.iconDay"
        ></i>
        <div class="icons">
          <span>
            {{ WeatherData.tempMax }}
            <span class="icons-du">℃</span>
          </span>
          <span class="icons-title">{{ WeatherData.textDay }}</span>
        </div>
      </div>
    </div>
    <div class="day-box">
      <div
        v-for="(item, index) in modelList"
        :key="index"
        class="item"
        @click="checkModel(index)"
        :class="{ 'item-active': modeIndex == index }"
      >
        <img :src="item.src" />
        <div style="margin-top:5px">{{ item.name }}</div>
      </div>
    </div>

    <div class="weather-box">
      <div>实时天气</div>
      <div class="item-layout">
        <div
          v-for="(item, index) in weatherList"
          :key="index"
          class="item"
          @click="checkWeather(index)"
          :class="{ 'item-active': weatherIndex == index }"
        >
          <img :src="item.src" />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>

    <div class="weather-box">
      <div>实时时间</div>
      <div class="item-layout">
        <div
          v-for="(item, index) in timeList"
          :key="index"
          class="item"
          @click="checkTime(index)"
          :class="{ 'item-active': timeIndex == index }"
        >
          <img :src="item.src" />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>

    <div class="weather-box" style="padding-bottom:20px;">
      <el-slider
        v-model="sliderTime"
        :step="1"
        show-stops
        :marks="marks"
        :max="24"
        @change="weatherChange"
      ></el-slider>
    </div>
  </div>
</template>
<script>
import Dayjs from "dayjs";
import {
  getWeatherCityId,
  getWeather,
  getWeatherPm2P5,
} from "../../api/connect";

export default {
  data() {
    return {
      // 获取当前时间
      date: "",
      time: "",
      WeatherData: "",
      WeatherPm2P5: "",
      timer: "",
      weatherList: [
        {
          key: "IndicatorPanel",
          name: "晴朗",
          icon: "iconqinglang",
          src: require("@/assets/images/weather/qinglang.png"),
        },
        {
          key: "subCenters",
          name: "多云",
          icon: "iconduoyun1",
          src: require("@/assets/images/weather/duoyun.png"),
        },
        {
          key: "keyProject",
          name: "下雨",
          icon: "iconxiayu",
          src: require("@/assets/images/weather/xiayu.png"),
        },
        {
          key: "cityExperience",
          name: "下雪",
          icon: "iconxiaxue",
          src: require("@/assets/images/weather/xiaxue.png"),
        },
      ],
      timeList: [
        {
          key: "IndicatorPanel",
          name: "早晨",
          icon: "iconzaochen",
          src: require("@/assets/images/weather/zaochen.png"),
        },
        {
          key: "subCenters",
          name: "中午",
          icon: "iconzhongwu",
          src: require("@/assets/images/weather/zhongwu.png"),
        },
        {
          key: "keyProject",
          name: "傍晚",
          icon: "iconbangwan",
          src: require("@/assets/images/weather/bangwan.png"),
        },
        {
          key: "cityExperience",
          name: "晚上",
          icon: "iconwanshang",
          src: require("@/assets/images/weather/wanshang.png"),
        },
      ],
      modelList: [
        {
          key: "IndicatorPanel",
          name: "正常模式",
          src: require("@/assets/images/weather/normalmodel.png"),
        },
        {
          key: "subCenters",
          name: "黑暗模式",
          src: require("@/assets/images/weather/blackmodel.png"),
        },
        {
          key: "keyProject",
          name: "灯光模式",
          src: require("@/assets/images/weather/light.png"),
        },
      ],
      weatherIndex: NaN,
      timeIndex: NaN,
      modeIndex: NaN,
      sliderTime: 15,
      marks: {
        0: "0:00",
        24: "24:00",
      },
    };
  },
  props:["weather_active"],
  methods: {
    get_Date_Time() {
      let date_time = Dayjs()
        .format("YYYY年MM月DD日/HH:mm:ss")
        .split("/");
      this.date = date_time[0];
      this.time = date_time[1];
    },
    weatherChange(e) {
      __g.weather.setDateTime(2020, 9, 9, e, 8, false);
    },
    async getWeatherData() {
      // 开发环境时把天气地区设置成深圳
      let name = process.env.NODE_ENV === "development" ? "深圳" : "深圳";
      const CityId = await getWeatherCityId(name);
      const CityWeather = await getWeather(CityId.location[0].id);
      this.WeatherData = CityWeather.daily[0];
      console.log(this.WeatherData, "WeatherData");
      const CityWeather_Pm2P5 = await getWeatherPm2P5(CityId.location[0].id);
      this.WeatherPm2P5 = CityWeather_Pm2P5;
    },
    test() {
      console.log(111);
    },
    checkWeather(index) {
      this.weatherIndex = index;
      switch (index) {
        case 0:
          __g.weather.disableRainSnow();
          __g.weather.setDarkMode(false);
          __g.weather.setCloudDensity(0); // 当为晴天时，去除云层
          break;
        case 1:
          __g.weather.disableRainSnow();
          __g.weather.setDarkMode(false);
          __g.weather.setCloudDensity(0.8);
          break;
        case 2:
          __g.weather.disableRainSnow();
          __g.weather.setDarkMode(false);
          __g.weather.setRainParam(1, 0.1, 0.2);
          break;
        case 3:
          __g.weather.disableRainSnow();
          __g.weather.setDarkMode(false);
          __g.weather.setSnowParam(1, 0.2, 0.2);
          break;
        default:
          break;
      }
    },
    checkTime(index) {
      this.timeIndex = index;
      switch (index) {
        case 0:
          __g.weather.setDateTime(2020, 9, 9, 8, 8, false);
          this.sliderTime = 9;
          break;
        case 1:
          __g.weather.setDateTime(2020, 9, 9, 12, 8, false);
          this.sliderTime = 11;
          break;
        case 2:
          __g.weather.setDateTime(2020, 9, 9, 17, 8, false);
          this.sliderTime = 18;
          break;
        case 3:
          __g.weather.setDateTime(2020, 9, 9, 21, 8, false);
          this.sliderTime = 21;
          break;
        default:
          break;
      }
    },
    checkModel(index) {
      this.modeIndex = index;
      if (index == 0 || index == 2) {
        __g.weather.setDarkMode(false);
      } else if (index == 1) {
        __g.weather.setDarkMode(true);
      }
    },
  },
  mounted() {
    this.timer = setInterval(() => {
      this.get_Date_Time();
    }, 1000);
    this.getWeatherData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  watch:{
    weather_active(newVal,oldVal){
      console.log(newVal,"weather_active中newVal的值");
    }
  }
};
</script>
<style lang="scss" scoped>
.layout {
  width: 427px;
  height: auto;
  padding: 25px 0;
  position: fixed;
  top: 95px;
  right: 60px;
  background: #000;
  background: linear-gradient(
    360deg,
    rgba(14, 26, 42, 0.9) 0%,
    rgba(26, 49, 80, 0.9) 100%
  );
  // border: 1px solid #7afafe !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  border-radius: 10px;
  .weather-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 387px;
    height: 77px;
    border-bottom: 1px solid rgba(122, 250, 254, 0.4);
    padding: 10px 0;
    .times {
      margin-left: 15px;
      margin-bottom: 18px;
    }
    .times,
    .weather {
      color: #ffffff;
    }
    .times,
    .temp {
      font-size: 32px;
      text-align: center;
      font-family: Digital-7Mono, Digital;
    }
    .times_time {
      font-size: 40px;
    }
    .years {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      margin-top: 10px;
    }
    .weather {
      display: flex;
      font-size: 24px;
      position: relative;
      i {
        font-size: 48px;
      }
      .temp {
        position: absolute;
        bottom: 0px;
        left: 5px;
        font-size: 30px;
        > span {
          font-size: 14px;
        }
      }
      .icons {
        margin-left: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 32px;

        .icons-du {
          font-size: 14px;
        }

        .icons-title {
          font-size: 14px;
          font-family: MicrosoftYaHei;
        }
      }
    }
    .el-divider {
      height: 26px;
      width: 1px;
      background: rgba(255, 255, 255, 0.2);
    }
  }

  .day-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 387px;
    height: auto;
    border-bottom: 1px solid rgba(122, 250, 254, 0.4);
    padding: 10px 0;
    .item {
      width: 91px;
      height: 73px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      cursor: pointer;
    }
    .item-active {
      background: rgba(122, 250, 254, 0.15);
    }
  }
  .weather-box {
    width: 387px;
    height: auto;
    padding: 10px;
    border-bottom: 1px solid rgba(122, 250, 254, 0.4);
    .item-layout {
      display: flex;
      justify-content: space-between;
      padding-top: 15px;
      .item {
        width: 54px;
        height: 61px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;
      }
      .item-active {
        background: rgba(122, 250, 254, 0.15);
      }
    }
  }
  .fadeout {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
  }
  .fadein {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
  }
}
</style>
